{% extends "base.html" %}

{% block title %}密码生成器 - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-key me-2"></i>
                    智能密码生成器
                </h4>
            </div>
            
            <div class="card-body p-4">
                <form id="passwordForm">
                    <div class="row g-3">
                        <!-- 密码长度 -->
                        <div class="col-md-6">
                            <label for="length" class="form-label">密码长度</label>
                            <div class="input-group">
                                <input type="range" class="form-range" id="lengthRange" min="6" max="32" value="12">
                                <input type="number" class="form-control" id="length" min="6" max="32" value="12" style="max-width: 80px;">
                            </div>
                            <small class="text-muted">6-32位字符</small>
                        </div>
                        
                        <!-- 字符类型选择 -->
                        <div class="col-md-6">
                            <label class="form-label">字符类型</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="useNumbers" checked>
                                <label class="form-check-label" for="useNumbers">
                                    数字 (0-9)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="useLetters" checked>
                                <label class="form-check-label" for="useLetters">
                                    字母 (a-z, A-Z)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="useSymbols">
                                <label class="form-check-label" for="useSymbols">
                                    特殊符号 (!@#$%^&*)
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-sync-alt me-2"></i>
                            生成密码
                        </button>
                    </div>
                </form>
                
                <!-- 生成结果 -->
                <div id="resultSection" class="mt-4" style="display: none;">
                    <div class="alert alert-success border-0 shadow-sm">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="alert-heading mb-2">生成的密码：</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control font-monospace" id="generatedPassword" readonly>
                                    <button class="btn btn-outline-success" type="button" id="copyButton">
                                        <i class="fas fa-copy"></i> 复制
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 密码强度指示器 -->
                        <div class="mt-3">
                            <label class="form-label small">密码强度：</label>
                            <div class="progress" style="height: 8px;">
                                <div id="strengthBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small id="strengthText" class="text-muted"></small>
                        </div>
                    </div>
                </div>
                
                <!-- 密码安全提示 -->
                <div class="alert alert-info border-0 mt-4">
                    <h6 class="alert-heading">
                        <i class="fas fa-lightbulb me-2"></i>
                        密码安全建议
                    </h6>
                    <ul class="mb-0 small">
                        <li>使用至少12位字符的密码</li>
                        <li>包含大小写字母、数字和特殊符号</li>
                        <li>避免使用个人信息或常见词汇</li>
                        <li>为不同网站使用不同的密码</li>
                        <li>定期更换重要账户的密码</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 长度滑块和输入框同步
    $('#lengthRange').on('input', function() {
        $('#length').val(this.value);
    });
    
    $('#length').on('input', function() {
        $('#lengthRange').val(this.value);
    });
    
    // 表单提交
    $('#passwordForm').on('submit', function(e) {
        e.preventDefault();
        generatePassword();
    });
    
    // 复制按钮
    $('#copyButton').on('click', function() {
        const passwordField = document.getElementById('generatedPassword');
        passwordField.select();
        document.execCommand('copy');
        
        // 显示复制成功提示
        const originalText = this.innerHTML;
        this.innerHTML = '<i class="fas fa-check"></i> 已复制';
        this.classList.remove('btn-outline-success');
        this.classList.add('btn-success');
        
        setTimeout(() => {
            this.innerHTML = originalText;
            this.classList.remove('btn-success');
            this.classList.add('btn-outline-success');
        }, 2000);
    });
    
    function generatePassword() {
        const length = parseInt($('#length').val());
        const useNumbers = $('#useNumbers').is(':checked');
        const useLetters = $('#useLetters').is(':checked');
        const useSymbols = $('#useSymbols').is(':checked');
        
        // 验证至少选择一种字符类型
        if (!useNumbers && !useLetters && !useSymbols) {
            alert('请至少选择一种字符类型！');
            return;
        }
        
        // 发送请求
        $.ajax({
            url: '/api/generate-password',
            method: 'POST',
            data: {
                length: length,
                use_numbers: useNumbers,
                use_letters: useLetters,
                use_symbols: useSymbols
            },
            success: function(response) {
                $('#generatedPassword').val(response.password);
                $('#resultSection').show();
                updatePasswordStrength(response.password);
            },
            error: function(xhr) {
                const error = xhr.responseJSON?.detail || '生成密码失败';
                alert(error);
            }
        });
    }
    
    function updatePasswordStrength(password) {
        let score = 0;
        let feedback = '';
        
        // 长度评分
        if (password.length >= 12) score += 25;
        else if (password.length >= 8) score += 15;
        else score += 5;
        
        // 字符类型评分
        if (/[a-z]/.test(password)) score += 15;
        if (/[A-Z]/.test(password)) score += 15;
        if (/[0-9]/.test(password)) score += 15;
        if (/[^a-zA-Z0-9]/.test(password)) score += 30;
        
        // 设置强度显示
        const strengthBar = $('#strengthBar');
        const strengthText = $('#strengthText');
        
        if (score >= 80) {
            strengthBar.css('width', '100%').removeClass().addClass('progress-bar bg-success');
            feedback = '非常强';
        } else if (score >= 60) {
            strengthBar.css('width', '75%').removeClass().addClass('progress-bar bg-warning');
            feedback = '强';
        } else if (score >= 40) {
            strengthBar.css('width', '50%').removeClass().addClass('progress-bar bg-info');
            feedback = '中等';
        } else {
            strengthBar.css('width', '25%').removeClass().addClass('progress-bar bg-danger');
            feedback = '弱';
        }
        
        strengthText.text(feedback);
    }
});
</script>
{% endblock %}